<template>
  <view>
    <scroll-view class="ts-home-tabs-scroll" :scroll-x="true" :show-scrollbar="false" :scroll-into-view="tabIndex">
      <view v-for="(tab,index) in settings" :key="tab.id" :id="tab.id" class="uni-tab-item" @click="onTab(tab)">
        <text :class="tabIndex===tab.id?'uni-tab-item-1':''">{{tab.name}}</text>
      </view>
    </scroll-view>
    <view v-for="(tab,index) in settings" v-if="tabIndex===tab.id" class="setting-body">
<!--    企业信息  -->
      <view v-if="tab.id === 'setting-1'">
        <view class="margin-top bg-white padding">
          <view class="padding-left-sm padding-bottom br-b cr-black">{{tab.name}}</view>
          <view class="h-custom flex">企业名称：<u--input v-model="firm.companyName" placeholder="请输入企业名称"/></view>
          <view class="h-custom flex">信用代码：<u--input v-model="firm.creditCode" placeholder="请输入信用代码"/></view>
          <button class="button-2" @click="saveInfo">确认修改</button>
        </view>
        <view class="margin-top-lg bg-white padding">
          <view class="padding-left-sm padding-bottom br-b cr-black">版本信息</view>
          <view class="h-custom flex">版本名称：
            <view v-if="extInfo.vip">永久·钻石VIP</view>
            <view v-else>普惠版</view>
          </view>
          <view class="h-custom flex">版本权益：
            <view v-if="extInfo.vip">无限用户，无限账套</view>
            <view v-else>{{ user.userNum }}用户，{{ user.accountSetsNum }}账套</view>
          </view>
          <!--        <button class="svip-button">开通超级会员</button>-->
        </view>
        <view class="margin-top-lg bg-white padding">
          <view class="padding-left-sm padding-bottom br-b cr-black">服务商信息</view>
          <view class="h-custom flex">服务商编号：<u--input v-model="agentCode" placeholder="联系服务商获取服务商编号"/></view>
          <button class="button-2" @click="bindAgent">确认绑定</button>
        </view>
      </view>

<!--   个人信息   -->
      <view v-if="tab.id === 'setting-2'" id="setting-2">
        <view class="margin-top bg-white padding">
          <view class="padding-left-sm padding-bottom br-b cr-black">{{tab.name}}</view>
          <view class="h-custom flex">邮箱：<u--input v-model="userInfo.email" placeholder="请输入邮箱"/></view>
          <view class="h-custom flex">姓名：<u--input v-model="userInfo.realName" placeholder="请输入姓名"/></view>
          <view class="text-1">* 当您录凭证或者审核凭证时，此姓名即为您的制单人姓名、审核人姓名</view>
          <button class="button-2" @click="updateUser">保存信息</button>
        </view>
        <view class="margin-top-lg bg-white padding">
          <view class="padding-left-sm padding-bottom br-b cr-black">修改密码</view>
          <view class="h-custom flex">原密码：<u--input v-model="passwordVo.original" type="password" /></view>
          <view class="h-custom flex">新密码：<u--input v-model="passwordVo.newPassword" type="password" /></view>
          <view class="h-custom flex">重复密码：<u--input v-model="passwordVo.repeatPassword" type="password" /></view>
          <button class="button-2" @click="updatePassWord">确认修改</button>
        </view>
        <view class="margin-top-lg bg-white padding">
          <view class="padding-left-sm padding-bottom br-b cr-black">账号变更</view>
          <view class="h-custom flex">姓名：<u--input v-model="userInfo.realName" disabled/></view>
          <view class="h-custom flex">手机号：<u--input v-model="account.mobile" />
            <button class="button-3" :disabled="account.mobile === user.mobile" @click="sendCode">{{ text }}</button></view>
          <view class="h-custom flex">验证码：<u--input v-model="account.verificationCode" /></view>
          <button class="button-2" @click="updateAcc">确认变更</button>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import settingApi from "../../js/api/setting";
import {CopyObj} from "../../js/util";
import qs from 'qs'
import common from "../../js/api/common";
import store from "../../stores";
const app = getApp();
export default {
  name: "setting",
  data(){
    return{
      settings:[{
        id:'setting-1',
        name:'企业信息'
      },{
        id:'setting-2',
        name:'个人信息'
      },/*{
        id:'setting-3',
        name:'员工管理'
      },{
        id:'setting-4',
        name:'交易记录'
      },{
        id:'setting-5',
        name:'发票管理'
      },{
        id:'setting-6',
        name:'登录日志'
      }*/],
      tabIndex:'setting-1',
      firm:{
        companyName:null,
        creditCode:null,
        address:null,
      },
      extInfo:{
        vip:null
      },
      agentCode:null,
      user:uni.getStorageSync(app.globalData.data.cache_config_info_key),
      agentInfo:{
        name:null,
        telephone:null,
      },
      userInfo:{
        email:null,
        realName:null,
      },
      passwordVo:{
        original:null,
        newPassword:null,
        repeatPassword:null
      },
      account: {
        verificationCode: null,
        mobile: null,
      },
      text:"发送验证码"
    }
  },
  onLoad(){
    this.load()
    CopyObj(this.userInfo,this.user)
    CopyObj(this.account,this.user)
  },
  methods:{
    onTab(data){
      this.tabIndex = data.id
    },
    load(){
      settingApi.extInfo().then((data)=>{
        CopyObj(this.firm,data)
        CopyObj(this.extInfo,data)
      })
    },
    bindAgent(){
		
		if(this.agentCode){
			settingApi.bindAgent({agentCode:this.agentCode}).then((data)=>{
			  app.globalData.showToast("绑定成功");
			  this.agentInfo = data
			})
		}else{
			app.globalData.showToast("请填写服务商编号");
		}
    },
    saveInfo(){
      settingApi.saveInfo(this.firm).then(()=>{
        app.globalData.showToast("修改成功");
      })
    },
    updateUser(){
      settingApi.updateUser(this.userInfo).then(()=>{
        app.globalData.showToast("更新成功");
        common.init().then((res) => {
          store.commit("setCustom",res.user)
          uni.setStorageSync(app.globalData.data.cache_config_info_key, res.user);
          uni.setStorageSync(app.globalData.data.cache_account_sets, res.user.accountSets);
        })
      })
    },
    updatePassWord(){
      settingApi.updatePassWord(this.passwordVo).then((data)=>{
        app.globalData.showToast("更新密码成功");
        store.commit("setCustom",null)
        uni.clearStorageSync();
        uni.navigateTo({
          url: '/pages/login/login'
        })
      })
    },
    sendCode(){
      this.text = "正在发送中"
      settingApi.sendCode(this.account.mobile).then(()=>{
        console.log("发送成功")
      }).finally(()=>{
        this.text = "发送验证码"
      })
    },
    updateAcc(){
      settingApi.changePhoneNumber(this.account).then(()=>{
        app.globalData.showToast("更新手机号成功");
        store.commit("setCustom",null)
        uni.clearStorageSync();
        uni.navigateTo({
          url: '/pages/login/login'
        })
      })
    }
  }
}
</script>
<style scoped>
.setting-body{
  padding-bottom: 50rpx;
}
.button-2{
  background-color: #3c72ff;
  margin: 25rpx 20rpx 0 20rpx;
  color: white;
}
.button-3{
  height: 64rpx;
  line-height: 64rpx;
  font-size: 15px;
  margin-left: 10px;
}
.ts-home-tabs-scroll {
  display: flex;
  height: 80rpx;
  line-height: 80rpx;
  flex-direction: row;
  white-space: nowrap;
  background-color: white;
}
.uni-tab-item {
  /* #ifndef APP-PLUS */
  display: inline-block;
  /* #endif */
  flex-wrap: nowrap;
  padding-left: 25rpx;
  padding-right: 25rpx;
  color: black;
}

.uni-tab-item-1{
  color: #3c72ff;
  border-bottom: 2px solid #3c72ff;
}

.h-custom{
  height: 64rpx;
  line-height: 64rpx;
  padding-left: 20rpx;
  padding-right: 20rpx;
  padding-top: 20rpx;
}

.svip-button {
  vertical-align: middle;
  background: linear-gradient(95.9deg, #ffeec3 3.14%, #ffe5ba 23.99%, #ffd8aa 43.77%, #ffd4a2 62.06%, #ffc896 79.86%, #fcb4ba 97.91%);
  color: #6b2d00;
  border: 0;
  display: inline;
  padding: 5px 20px;
  border-radius: 2px;
}

.text-1{
  color: red;
  font-size: 24rpx;
  margin-left: 20rpx;
  margin-top: 10rpx;
}
</style>